<template>
    <div class="cart">
        <NavBar style="background: pink">
            <div slot="center" class="center">购物车（{{cartListLength}}）</div>
        </NavBar>
        <CardList></CardList>
        <CartButtomBar></CartButtomBar>
    </div>
</template>
<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import CardList from "@/views/cart/childComps/CardList";
  import CartButtomBar from "@/views/cart/childComps/CartButtomBar";
  export default {
    name: "MyCart",
    components:{
        NavBar,CardList,CartButtomBar
    },
    data(){
        return{
        }
    },
    computed:{
        cartListLength(){
            return this.$store.getters.cartLength
        },
    }
  }
</script>
<style scoped>
.center{
    line-height: 44px;
    font-size: 20px;
    color: white;
    font-weight: bolder;
}
.cart{
    height: calc(100vh - 49px);
}
</style>
